<template>
  <dl class="center-container nav-box">
    <dt class="list-title">{{cat_name}}</dt>
    <dd v-for="item in modelValue" :key="item.t_plant_pk" class="list-item">
      <router-link :to="getListUrl($route.params,item)">{{ item.plant_name }}</router-link>
    </dd>
  </dl>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Array,
    },
    cat_name: {
      type: String,
    },
  },
};
</script>

<style scoped>
  .nav-box {
    display: flex;
    padding: 10px 0px;
  }

  .nav-box>* {
    height: 40px;
    font-size: 110%;
    line-height: 40px;
    padding: 0px 10px;
    border-radius: 5px;
    border: 1px solid var(--base-color);
  }

  .nav-box>dt {  
    color: var(--base-color);
    font-weight: 900;
  }

  .list-item {
    background-color: var(--base-color);
    font-weight: 700; 
    margin-left: 10px;
  }

  .list-item>a {
    color: #fff; 
    display: block;
    height: 100%;
  }

  .list-item:hover {
    border-color: var(--base-color);
    background-color: #fff;;
  }

  .list-item:hover>a {
    color: var(--base-color);
  }
</style>